<template>
  <div class="pageList" id="nav-bar">
    <!-- <van-nav-bar title="校园自助打印服务系统" /> -->
    <img
      class="banner"
      ref="banner"
      src="@/assets/images/pageList/banner.png"
      alt=""
    />
    <img class="wenzi" src="@/assets/images/iconpng/icon/wenzi 36.png" alt="" />
    <div class="centre" v-if="isRender">
      <ul class="list">
        <li
          class="item"
          :style="`height:${sh || ''}px`"
          v-for="(item, index) of imgList"
          :key="index"
          @click="imgClick(item)"
        >
          <img class="bg" :src="item.bg" alt="" />

          <div class="middle">
            <div class="left">
              <p class="text">{{ item.text }}</p>
              <p class="english">{{ item.english }}</p>
            </div>
            <div class="right">
              <img :src="item.icon" alt="" />
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data() {
    const { targetUrl } = this.$setting;
    return {
      targetUrl,
      isRender: false,
      sh: 0,
      imgList: [
        {
          bg: require("@/assets/images/pageList/buffet.png"),
          path: "/selfService",
          text: "电子证明申请",
          english: "Electronic certificate application",
          icon: require("@/assets/images/pageList/buffet.icon.png"),
        },
        {
          bg: require("@/assets/images/pageList/print.png"),
          text: "终端打印类型",
          english: "Terminal Print Type",
          icon: require("@/assets/images/pageList/print.icon.png"),
          path: targetUrl + "zdPrintType",
        },
        {
          bg: require("@/assets/images/pageList/transcript.png"),
          text: "成绩证明查看",
          english: "Review of scores and certificates",
          icon: require("@/assets/images/pageList/transcript.icon.png"),
          path: targetUrl + "personal",
        },
        {
          bg: require("@/assets/images/pageList/location.png"),
          text: "终端位置",
          english: "Terminal location",
          icon: require("@/assets/images/pageList/location.icon.png"),
          path: targetUrl + "zdAdress",
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["originData", "dllgJson", "userInfo"]),
  },
  mounted() {
    console.log(`屏幕高度: ${window.innerHeight}`);
    this.$toast.loading({ message: "加载中..." });
    const { admin, fix } = this.dllgJson;
    // 权限访问 start
    if (admin === "true") {
      this.imgList.push({
        bg: require("@/assets/images/pageList/root.png"),
        text: "管理员",
        english: "Administrator",
        icon: require("@/assets/images/pageList/root.icon.png"),
        path: this.targetUrl + "administrator",
      });
    }
    if (fix === "true") {
      this.imgList.push({
        bg: require("@/assets/images/pageList/operation.png"),
        text: "运维管理",
        english: "Maintenance management",
        icon: require("@/assets/images/pageList/operation.icon.png"),
        path: this.targetUrl + "maintain",
      });
    }
    // 权限访问 end

    setTimeout(() => {
      this.isRender = true;
      this.$toast.clear();
      this.setItemHeight();
    }, 500);
  },
  methods: {
    setItemHeight() {
      let ih = window.innerHeight; // 屏幕高度
      let th = ih - ih * 0.28; // 可用高度(含边距)
      let ch = th - 60; // 可用高度(不含边距)
      let sh = ch / 2;
      this.sh = sh;
      console.log("屏幕高度: " + ih);
      console.log("可用高度(含边距): " + th);
      console.log("可用高度(不含边距): " + ch);
      console.log("单项高度: " + sh);
    },
    imgClick(item) {
      let reg = /^http(s)?/;
      if (reg.test(item.path)) {
        let { originData } = this;
        if (!originData) {
          let data = {
            userId: this.userInfo.userId,
            admin: "false",
            fix: "false",
          };
          originData = this.$utils.encryptByDES(JSON.stringify(data));
          console.log(originData, "originData 加密的");
        }
        window.location.href = `${item.path}?data=${
          this.originData || originData
        }`;
      } else {
        this.$router.push(item.path);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variable.scss";
#nav-bar ::v-deep .van-nav-bar__title {
  color: #fff;
  font-size: 0.506667rem /* 19/37.5 */;
}
.pageList {
  position: relative;
  height: 100vh;
  .banner {
    position: absolute;
    top: 0;
    width: 100%;
  }
  .wenzi {
    position: absolute;
    width: 5.866667rem /* 220/37.5 */;
    height: 2.4rem /* 90/37.5 */;
    left: 0.4rem /* 15/37.5 */;
    top: 2.4rem /* 90/37.5 */;
  }
  // }
  .van-nav-bar {
    background: none;
  }
  .van-nav-bar__title {
    font-weight: 600;
    color: #fff;
    font-size: 0.506667rem /* 19/37.5 */;
  }
  .van-nav-bar .van-icon {
    color: #111;
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .centre {
    position: absolute;
    top: 5.04rem /* 189/37.5 */;
    // top:28%;
    left: 0.373333rem /* 14/37.5 */;
    right: 0.373333rem /* 14/37.5 */;
    display: flex;
    justify-content: center;
    .list {
      .item {
        // height: 4.773333rem /* 179/37.5 */;
        box-sizing: border-box;
        padding: 0.266667rem /* 10/37.5 */;
        background: #ffffff;
        border-radius: 0.266667rem /* 10/37.5 */;
        box-shadow: 0px 1px 5px 0px rgba(33, 114, 237, 0.15);
        margin-bottom: 30px;
        text-align: right;
        position: relative;
        .middle {
          position: absolute;
          right: 1.066667rem /* 40/37.5 */;
          top: 50%;
          transform: translate(0, -50%);
          display: flex;
          align-items: center;
          .right {
            img {
              width: 1.333333rem /* 50/37.5 */;
            }
          }
          .left {
            margin-right: 0.4rem /* 15/37.5 */;
            .text {
              font-size: 0.48rem + $fontsize /* 18/37.5 */;
              color: #fff;
            }
            .english {
              font-size: 0.32rem + $fontsize /* 12/37.5 */;
              color: #fff;
            }
          }
        }
        .bg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
